<template>
  <PageWrapper title="">
    <Card :hoverable="false" :bordered="false" size="default" title="">
      <vxe-form :data="formConditionData.data" title-colon collapse-status>
          <vxe-form-item title="仓库">
            <template #default="{ data }">
              <vxe-input
              v-model="data.word" clearable
                prefix-icon="vxe-icon-search"
                placeholder="名称|编号"/>
            </template>
          </vxe-form-item>
          <vxe-form-item align="center">
          <template #default>
              <vxe-button type="submit" status="default" icon="vxe-icon-search" @click="reloadWarehoust" title="点击查询">查询</vxe-button>
              <a-popconfirm title="确定重置查询条件吗？" @confirm="reset">
                  <vxe-button status="default" icon="vxe-icon-repeat">重置</vxe-button>
              </a-popconfirm>
          </template>
          </vxe-form-item>
        </vxe-form>
    </Card>
    <h1></h1>
    <Card hoverable :bordered="false" size="default">
      <Tabs
      v-model:activeKey="activeKey"
      type="line" size="large"
      tab-position="left"
      :destroyInactiveTabPane="true"
      :tabBarStyle="tabBarStyle"
      >
      <template #leftExtra>
        <a-button block type="dashed" v-if="getButton('创建仓库')" @click="drawer.data.show = true">创建仓库</a-button>
      </template>
        <TabPane v-for="(v, i) in warehouseList" :key="i">
          <template #tab>
            <Badge :color="enableComputed(v.enable)" :text="v.name"/>
          </template>
          <Descriptions
          layout="vertical" size="middle" :bordered="false"
          :column="{ xs:2, sm:3, md:3, lg:5, xl: 5, xxl: 5,}"
          >
          <template #title>
            <div style="color: rgb(76, 73, 73);font-size: 1.1rem;">
              仓库基础信息
              <a-button type="link" size="small" v-if="getButton('修改仓库')" @click="handleEdit(v)">修改仓库</a-button>
                <Popconfirm
                  v-if="getButton('删除仓库')"
                  placement="topRight"
                  :title="`提示：请确认您要删除【${v.name}】吗？`"
                  cancel-text="取消"
                  ok-text="确定"
                  @confirm="handleDelete(v.ID)">
                  <a-button type="link" size="small" danger>删除仓库</a-button>
                </Popconfirm>
            </div>
            
          </template>
          <!-- <template #extra>
            <Space>
              <a-button type="dashed" size="middle" v-if="getButton('修改仓库')" @click="handleEdit(v)">修改仓库</a-button>
              <Popconfirm
                v-if="getButton('删除')"
                placement="topRight"
                :title="`提示：请确认您要删除 ${v.name} 吗？`"
                cancel-text="取消"
                ok-text="确定"
                @confirm="handleDelete(v.ID)">
                <a-button type="dashed" danger>删除</a-button>
              </Popconfirm>
            </Space>
          </template> -->
            <DescriptionsItem label="仓库名称">
              <Badge :color="enableComputed(v.enable)" :text="v.name"/>
            </DescriptionsItem>
            <DescriptionsItem label="仓库编号"><b>{{ v.code }}</b></DescriptionsItem>
            <!-- <DescriptionsItem label="仓库地址">{{ v.address }}</DescriptionsItem>
            <DescriptionsItem label="仓库电话">{{ v.phone }}</DescriptionsItem> -->
            <DescriptionsItem label="仓库备注">{{ v.memo }}</DescriptionsItem>
          </Descriptions>
          <WarehouseArea :parent-id="v.ID" :name="v.name" :code="v.code"/>
        </TabPane>
      </Tabs>
    </Card>

    <Drawer
    :show="drawer.data.show" :is-update="drawer.data.isUpdate"
    :row="drawer.data.row"
    @on-success="onSuccess"
    @on-drawer-close="onDrawerClose"/>
  </PageWrapper>
</template>
<script lang="ts" name="Warehouse" setup>
import { Badge, Card, Descriptions, DescriptionsItem, Popconfirm, TabPane, Tabs } from 'ant-design-vue';
import { computed, reactive, ref } from 'vue';
import { useRoute } from "vue-router";
import Drawer from "./Drawer.vue";
import WarehouseArea from './area/warehouse-area.vue';
import { deletes, getListData } from '/@/api/wms/warehouse';
import { PageWrapper } from '/@/components/Page';

const activeKey = ref(0);

const height = window.innerHeight - 250
const tabBarStyle = {height: height+'px', }

const drawer = reactive({data: {
  show: false,
  isUpdate: false,
  row: null,
}})

const handleEdit = (row_:any) => {
  drawer.data.show = true
  drawer.data.isUpdate = true
  drawer.data.row = row_
}

const handleDelete = async (id:number) => {
  await deletes([id])
  reloadWarehoust()
  activeKey.value = 0
}

const onDrawerClose = () => {
  Object.assign(drawer, {data: {}})
}

const onSuccess = () => {
  // xGrid.value.reload()
  reloadWarehoust()
}

let enableComputed = computed(() => {
  return function(enable:number) {
    return enable === 1 ? 'green' : 'red'
  }
})

const formConditionData = reactive({
  data: {
    word: '',
  }
})
// api
const warehouseList = ref()
const reloadWarehoust = () => {
  getListData(formConditionData.data).then((dd:any) => {
    warehouseList.value = dd as any[]
  })
}
reloadWarehoust()

const reset = () => {
  Object.assign(formConditionData, {data: {}});
  reloadWarehoust()
}

const route = useRoute()
const getButton = (name:string) => {
  const list = route?.meta?.buttonList || []
  return list.find(e => e.name === name)
}

</script>

<style scoped>
:deep().ant-tabs-nav-wrap{
  width: 250px;
}
:deep().ant-tabs-nav-list{
  display: flex;
  align-items: center;
}
:deep().ant-tabs-tab-active .ant-badge-status-text {
  color: #0960bd;
  font-weight: bolder;
  font-size: 1.1rem;
  transition: font .1s;
}
:deep().ant-tabs-tab {
  display: flex;
  justify-content: end;
  width: 100%;
}
:deep().ant-tabs-tab:hover {
    background-color: rgba(230, 230, 230, 0.3);
    transition: .3s ease;
  }
:deep().ant-tabs-extra-content {
  width: 100%;
  margin-bottom: 10px;
}
</style>